<template>
	<view class="uni-goods-nav">
		<!-- 底部占位 -->
		<view class="uni-tab__seat" />
		<view class="uni-tab__cart-box flex">
			<view class="flex uni-tab__cart-sub-left">
				<view v-for="(item, index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index, item)">
					<view class="uni-tab__icon">
						<u-icon :name="item.icon" size="20" :color="item?.iconColor || '#646566'"></u-icon>
					</view>
					<text class="uni-tab__text" :style="{ color: item.textColor ? item.textColor : '#646566' }">{{ item.text }}</text>
					<view class="flex uni-tab__dot-box">
						<text
							v-if="item.info"
							:class="{ 'uni-tab__dots': item.info > 9 }"
							class="uni-tab__dot"
							:style="{ backgroundColor: item.infoBackgroundColor ? item.infoBackgroundColor : '#ff0000', color: item.infoColor ? item.infoColor : '#fff' }"
						>
							{{ item.info }}
						</text>
					</view>
				</view>
			</view>
			<view :class="{ 'uni-tab__right': fill }" class="flex uni-tab__cart-sub-right">
				<view
					v-for="(item, index) in buttonGroup"
					:key="index"
					:style="{ background: item.backgroundColor, color: item.color }"
					class="flex uni-tab__cart-button-right"
					@click="buttonClick(index, item)"
				>
					<u-loading-icon v-if="item.loading" :color="item.color" size="18px" class="mr5"></u-loading-icon>
					<text :style="{ color: item.color }" class="uni-tab__cart-button-right-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup name="UniGoodsNav">
/**
 * GoodsNav 底部自定义导航
 * @description 发送、详情等
 * @property {Array} options 组件参数
 * @property {Array} buttonGroup 组件按钮组参数
 * @property {Boolean} fill = [true | false] 组件按钮组参数
 * @event {Function} click 左侧点击事件
 * @event {Function} buttonClick 右侧按钮组点击事件
 * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
 */
import { onShow } from '@dcloudio/uni-app';
import { nextTick, ref, watch } from 'vue';

const emit = defineEmits(['click', 'buttonClick']);

const props = defineProps({
	options: {
		type: Array,
		default() {
			return [
				{
					icon: 'list-dot',
					text: '导入',
					info: 9
				},
				{
					icon: 'info-circle',
					text: '异常',
					textColor: 'rgba(238,129,48,0.7)',
					iconColor: 'rgba(238,129,48,0.7)'
				}
			];
		}
	},
	buttonGroup: {
		type: Array,
		default() {
			return [
				{
					text: '详情',
					backgroundColor: 'rgb(236,245,255)',
					color: 'rgb(0,118,255)',
					loading: false
				},
				{
					text: '发送',
					backgroundColor: 'rgb(0,118,255)',
					color: '#fff',
					loading: false
				}
			];
		}
	},
	fill: {
		type: Boolean,
		default: false
	}
});

const { options, buttonGroup, fill } = toRefs(props);

function onClick(index, item) {
	emit('click', {
		index,
		content: item
	});
}
function buttonClick(index, item) {
	emit('buttonClick', {
		index,
		content: item
	});
}
</script>

<style lang="scss">
.flex {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
}

.uni-goods-nav {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.uni-tab__cart-box {
	flex: 1;
	height: 100rpx;
	background-color: #fff;
	z-index: 900;
}

.uni-tab__cart-sub-left {
	// padding: 0 5px;
}

.uni-tab__cart-sub-right {
	flex: 1;
}

.uni-tab__right {
	margin: 5px 0;
	margin-right: 10px;
	border-radius: 100px;
	overflow: hidden;
}

.uni-tab__cart-button-left {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	// flex: 1;
	position: relative;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 0 16px;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.uni-tab__icon {
	width: 18px;
	height: 18px;
}

.image {
	width: 18px;
	height: 18px;
}

.uni-tab__text {
	margin-top: 3px;
	font-size: 12px;
	color: #646566;
}

.uni-tab__cart-button-right {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: row;
	/* #endif */
	flex: 1;
	justify-content: center;
	align-items: center;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
	.mr5 {
		margin-right: 5px;
	}
}

.uni-tab__cart-button-right-text {
	font-size: 14px;
	color: #fff;
}

.uni-tab__cart-button-right:active {
	opacity: 0.7;
}

.uni-tab__dot-box {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
	position: absolute;
	right: -2px;
	top: 2px;
	justify-content: center;
	align-items: center;
	// width: 0;
	// height: 0;
}

.uni-tab__dot {
	// width: 30rpx;
	// height: 30rpx;
	padding: 0 4px;
	line-height: 15px;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	background-color: #ff0000;
	border-radius: 15px;
}

.uni-tab__dots {
	padding: 0 4px;
	// width: auto;
	border-radius: 15px;
}
</style>
